<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-container class="container">
    <el-header>
      <el-row>
        <el-col :span="5">
          <span style="color: #e9d199; font-size: 1.5em">博物馆管理系统</span>
        </el-col>
        <el-col :span="1" :offset="15">
          <el-popover
              placement="bottom"
              width="500"
              trigger="hover">
            <el-table :data="gridData">
              <el-table-column width="100" property="noticeName" label="通知"></el-table-column>
              <el-table-column width="400" label="通知详情">
                <template slot-scope="scope">
                  <span v-html="scope.row.noticeDetail"></span>
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference" type="warning" icon="el-icon-message" round></el-button>
          </el-popover>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button type="warning" @click="logout" round>退出</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside>
        <el-menu
            :router="true"
            :default-active="this.$route.path"
            class="el-menu-aside">
          <el-menu-item index="/admin/mission/get">
            <i class="el-icon-menu"></i>
            <span slot="title">查看任务</span>
          </el-menu-item>
          <el-menu-item v-for="func in this.functions" :key="func.functionId" :index="func.functionIndex">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ func.functionName }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getFunctionsByDepart, getInternalNotice} from "@/api/request";

export default {
  data() {
    return {
      gridData: [{
        noticeId: 1,
        noticeName: '',
        noticeDetail: ''
      }],
      functions: [
        {
          functionId: 1,
          functionName: '',
          functionIndex: '',
          departId: 1
        }
      ],
      currentStaff: {},
    }
  },
  methods: {
    logout() {
      this.$router.push('/admin/login')
    }
  },
  mounted() {
    if (sessionStorage.getItem("currentStaff") != null) {
      this.currentStaff = JSON.parse(sessionStorage.getItem("currentStaff"))
    }
    console.log(this.currentStaff.staffPrivilege)
    getFunctionsByDepart(this.currentStaff.staffPrivilege).then(
        res => {
          if (res.data.code === 1) {
            this.functions = res.data.data
          }
        }
    )
    getInternalNotice(this.currentStaff.staffPrivilege).then(
        res => {
          if (res.data.code === 1) {
            this.gridData = res.data.data
          }
        }
    )
  }
}
</script>

<style scoped>
.el-aside::-webkit-scrollbar {
  display: none;
}

.container {
  position: absolute;
  width: 100%;
  height: 100vh;
}

.el-aside {
  background-color: #f9f4e9 !important;
}

.el-menu-item-group {
  background-color: #f9f4e9 !important;
}

.el-submenu {
  background-color: #f9f4e9 !important;
}

.el-menu-item {
  background-color: #f9f4e9 !important;
}

.el-menu-aside {
  background-color: #f9f4e9 !important;
}
</style>
